@extends('layouts.system')

@section('css')

    <style type="text/css">
        .checkLink, .checkLink:focus, .checkLink:hover, .checkLink:active {
            color: #06b55a;
        }

        .selDiv {
            width: 100px;
            padding: 0;
        }

        .selDiv button {
            width: 90px;
            border-radius: 5px;
        }

        .selFile {
            width: 90px;
            border-radius: 5px;
            margin-left: 30px;
        }

        .selFile button {
            width: 90px;
            border-radius: 5px;
        }

        .btnDiv {
            margin: 18px 0;
        }

        .btnDiv button {
            width: 90px;
            padding: 5px 11px;
            border-radius: 5px;
        }
    </style>

@endsection

@section('content')
    <div id="cl-wrapper" class="fixed-menu">
        <div class="container-fluid" id="pcont">
            <div class="col-md-12" style="padding-right: 0;">
                <div class="block-flat">
                    <div class="header">
                        <div class="pull-left">
                            <p class="jb_underline">用户管理&#62;&#62;用户详情</p>
                        </div>
                        <div class="clearfix"></div>
                    </div>


                    <div class="content">
                        <ul class="nav nav-tabs" role="tablist" style="margin: 20px 0;">
                            <li role="presentation" class="active">
                                <a href="#about" aria-controls="about" role="tab" data-toggle="tab">概况</a>
                            </li>
                            <li role="presentation">
                                <a href="#task" aria-controls="task" role="tab" data-toggle="tab">任务记录</a>
                            </li>
                            <li role="presentation">
                                <a href="#cash" aria-controls="cash" role="tab" data-toggle="tab">提现记录</a>
                            </li>
                            <li role="presentation">
                                <a href="#income" aria-controls="income" role="tab" data-toggle="tab">结算记录</a>
                            </li>
                            <li role="presentation">
                                <a href="#friend" aria-controls="friend" role="tab" data-toggle="tab">邀请的好友</a>
                            </li>
                            <li role="presentation">
                                <a href="#login" aria-controls="login" role="tab" data-toggle="tab">登录记录</a>
                            </li>
                        </ul>


                        <div class="tableDiv tab-content">
                            <div role="tabpanel" class="tab-pane active" id="about">
                                <table class="table-bordered" style="width: 400px;">
                                    <tbody>
                                    <tr>
                                        <td>用户ID</td>
                                        <td v-text="detail.id"></td>
                                    </tr>
                                    <tr>
                                        <td>注册时间</td>
                                        <td v-text="detail.created_at"></td>
                                    </tr>
                                    <tr>
                                        <td>用户名称</td>
                                        <td v-text="detail.name"></td>
                                    </tr>
                                    <tr>
                                        <td>身份</td>
                                        <td v-text="identity[detail.identity]"></td>
                                    </tr>
                                    <tr>
                                        <td>等级</td>
                                        <td v-text="detail.level"></td>
                                    </tr>
                                    <tr>
                                        <td>邀请好友数</td>
                                        <td v-text="friendListLists.length"></td>
                                    </tr>
                                    <tr>
                                        <td>执行任务数</td>
                                        <td v-text="taskLists.length"></td>
                                    </tr>
                                    <tr>
                                        <td>提现次数</td>
                                        <td v-text="cashLists.length"></td>
                                    </tr>
                                    <tr>
                                        <td>余额</td>
                                        <td v-text="detail.balance"></td>
                                    </tr>
                                    <tr>
                                        <td>已提现金额</td>
                                        <td v-text="detail.transform_cash"></td>
                                    </tr>
                                    <tr>
                                        <td>任务收入</td>
                                        <td v-text="detail.task_earnings"></td>
                                    </tr>
                                    <tr>
                                        <td>提成收入</td>
                                        <td v-text="detail.reward_earnings"></td>
                                    </tr>
                                    <tr>
                                        <td>总收入</td>
                                        <td v-text="detail.total_earnings"></td>
                                    </tr>
                                    <tr>
                                        <td>最后登录IP</td>
                                        <td v-text="detail.login_log.client_ip"></td>
                                    </tr>
                                    <tr>
                                        <td>状态</td>
                                        <td v-if="detail.state == 1">正常</td>
                                        <td v-if="detail.state == 2">封禁</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div role="tabpanel" class="tab-pane" id="task">
                                <table class="table-bordered">
                                    <thead>
                                    <tr>
                                        <th>任务ID</th>
                                        <th>任务名称</th>
                                        <th>执行状态</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in taskLists">
                                        <td v-text="item.task_id"></td>
                                        <td v-text="item.title"></td>
                                        <td>
                                            <span v-if="item.state == 1">未提交</span>
                                            <span v-if="item.state == 2">审批中</span>
                                            <span v-if="item.state == 3">不合格</span>
                                            <span v-if="item.state == 4">通过</span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div role="tabpanel" class="tab-pane" id="cash">
                                <table class="table-bordered">
                                    <thead>
                                    <tr>
                                        <th>提现记录号</th>
                                        <th>提现时间</th>
                                        <th>提现金额</th>
                                        <th>提现后余额</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item, index) in cashLists">
                                        <td v-text="item.id"></td>
                                        <td v-text="item.created_at"></td>
                                        <td v-text="item.cash_money"></td>
                                        <td v-text="item.extract_balance"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div role="tabpanel" class="tab-pane" id="income">
                                <table class="table-bordered">
                                    <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>完成任务数</th>
                                        <th>收入</th>
                                        <th>详情</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in balanceLists">
                                        <td v-text="item.month"></td>
                                        <td v-text="item.total_nums"></td>
                                        <td v-text="item.total_cash_money"></td>
                                        <td>
                                            <a href="javascript:;" v-on:click="checkMonthDetails(item.month)">查看详情</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                                <br>
                                <br>
                                <br>

                                <table v-if="activeMonth" class="table table-bordered">
                                    <caption>
                                        <h2>
                                            <span v-text="activeMonth"></span>
                                            结算详情
                                        </h2>
                                    </caption>
                                    <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>任务名</th>
                                        <th>收入</th>
                                        <th>类型</th>
                                        <th>操作者</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in monthDetails">
                                        <td v-text="item.time"></td>
                                        <td v-text="item.title"></td>
                                        <td v-text="item.money"></td>
                                        <td v-text="item.type_name"></td>
                                        <td>
                                           <span v-text="item.username"></span>
                                            &nbsp;&nbsp;完成获得
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div role="tabpanel" class="tab-pane" id="friend">
                                <table class="table-bordered">
                                    <thead>
                                    <tr>
                                        <th>好友ID</th>
                                        <th>好友账号</th>
                                        <th>好友名称</th>
                                        <th>邀请时间</th>
                                        <th>提成金额</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in friendListLists">
                                        <td v-text="item.id"></td>
                                        <td v-text="item.account"></td>
                                        <td v-text="item.name"></td>
                                        <td v-text="item.created_at"></td>
                                        <td v-text="item.total_reward_earnings"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div role="tabpanel" class="tab-pane" id="login">
                                <table class="table-bordered" style="width: 400px;">
                                    <thead>
                                    <tr>
                                        <th>登录时间</th>
                                        <th>登录IP</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(items , index) in loginLoginLists">
                                        <td v-text="items.created_at"></td>
                                        <td v-text="items.client_ip"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">

      Vue.use(VueResource)
      var vm = new Vue({
        el: '#pcont',
        data: {
          identity: {},
          detail: {
            login_log: {}
          },
          taskLists: {},
          cashLists: {},
          balanceLists: {},
          friendListLists: {},
          loginLoginLists: {},
          activeMonth: null,
          monthDetails: {}
        },
        created: function () {
          getUserDetailInfo(this);
          getTaskLists(this);
          getCashLists(this);
          getBalanceLists(this);
          getFriendLists(this);
          getUserLoginLogs(this);
        },
        methods: {
          changePage: function (current) {
            this._data.current = current
            getLists(this);
          },
          search: function () {
            getLists(this);
          },
          forbid: function (state) {
            forbid(this, state)
          },
          changeType: function () {
            this._data.keyword = ''
          },
          checkMonthDetails: function (month) {
              this.activeMonth = month
              getMonthDetails(this,month)
          }
        }
      })

      //获取好友列表
      function getUserDetailInfo(_vm) {
        _vm.$http.get('/admin/user/getUserInfo/{{$id}}')
          .then(function (response) {
            var json = response.body;
            if (json.state == 1) {
              _vm._data.identity = json.data.identity;
              _vm._data.detail = json.data.detail;
            }
          })
          .catch(function (response) {
            console.log(response)
          })
      }

      //获取任务列表
      function getTaskLists(_vm) {
        _vm.$http.get('/admin/user/getTaskLists/{{$id}}')
          .then(function (response) {
            var json = response.body;
            if (json.state == 1) {
              _vm._data.taskLists = json.data.lists;
            }
          })
          .catch(function (response) {
            console.log(response)
          })
      }

      function getCashLists(_vm) {
        _vm.$http.get('/admin/user/getCashLists/{{$id}}')
          .then(function (response) {
            var json = response.body;
            if (json.state == 1) {
              _vm._data.cashLists = json.data.lists;
            }
          })
          .catch(function (response) {
            console.log(response)
          })
      }

      function getBalanceLists(_vm) {
        _vm.$http.get('/admin/user/getBalanceLists/{{$id}}')
          .then(function (response) {
            var json = response.body;
            if (json.state == 1) {
              _vm._data.balanceLists = json.data;
            }
          })
          .catch(function (response) {
            console.log(response)
          })
      }

      function getMonthDetails(_vm,month) {
          _vm.$http.get('/admin/user/getMonthDetails/{{$id}}?month='+month)
              .then(function (response) {
                  var json = response.body;
                  if (json.state == 1) {
                      _vm._data.monthDetails = json.data;
                  }
              })
              .catch(function (response) {
                  console.log(response)
              })
      }

      //获取好友列表
      function getFriendLists(_vm) {
        _vm.$http.get('/admin/user/getFriendLists/{{$id}}')
          .then(function (response) {
            var json = response.body;
            if (json.state == 1) {
              _vm._data.friendListLists = json.data.lists;
            }
          })
          .catch(function (response) {
            console.log(response)
          })
      }

      //获取登录记录列表
      function getUserLoginLogs(_vm) {
        _vm.$http.get('/admin/user/getUserLoginLogs/{{$id}}')
          .then(function (response) {
            var json = response.body;
            if (json.state == 1) {
              _vm._data.loginLoginLists = json.data.lists;
            }
          })
          .catch(function (response) {
            console.log(response)
          })
      }

    </script>
@endsection